<template>
	<up-navbar :height="mbh" safeAreaInsetTop :pbt="pbt" fixed leftIcon="list" :leftIconColor="uniColorBlack" leftIconSize="32rpx">
		<template #center>
			<searchBar :style="mgrStyle"></searchBar>
		</template>
	</up-navbar>
</template>
<script lang="ts">
	export default {
		options: { styleIsolation: 'shared' },
	}
</script>
<script lang="ts" setup>
	import { onReady } from "@dcloudio/uni-app"
	import { uniColorBlack } from "@/uni.module.scss";
	import { computed, ref } from "vue";
	const mbh = ref<number>(0);
	const pbt = ref<string>('');
	const mgl = ref<number>(0);
	const mgw = ref<number>(0);
	const pd = ref<number>(0);
	let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
	mbh.value = menuButtonInfo.height;
	mgl.value = uni.upx2px(32) + 26;
	pd.value = 13;
	mgw.value = menuButtonInfo.left - mgl.value - pd.value;
	const mgrStyle = computed<string>(() => `margin-left:${mgl.value}px;width:${mgw.value}px;`);
	uni.getSystemInfo({
		success :(res)=> {
			pbt.value = menuButtonInfo.top - res.safeAreaInsets.top +'px';
		}
	});
	onReady(() : void => {
		console.log('pbt',pbt.value )
	})
</script>

<style lang="scss" scoped>
	.u-navbar {
		::v-deep .u-navbar__content {
			padding-top:4px;
			justify-content: flex-start;
		}
	}
</style>